<!--
	作者：2575202388@qq.com
	时间：2018-10-14
	描述：前端分页组件
-->
<template>
	<Page @on-change="Change" @on-page-size-change="changesize" :current="current" :total="total" :show-elevator="showelevator" :page-size="pagesize" :show-sizer="showsizer" :placement="placement" :transfer="transfer" :page-size-opts="pagesizeopts">

	</Page>
</template>

<script>
	export default {
		name: "Fypage",
		props: {
			serverUrl: {
				type: String,
				default: ""
			},
			paramiters: {
				type: Object,
				default: function() {
					return {};
				}
			},
			type: {
				type: String,
				default: function() {
					return "post";
				}
			},
		},
		data() {
			return {
				current: 1,
				total: 0,
				pagesizeopts: [10, 20, 50, 100,150],
				size: "default",
				showelevator: true,
				showsizer: true,
				placement: "top",
				transfer: true,
				pagesize: 10,
				_datas: []
			}
		 },
		methods: {
			Change(currentPage) {
				this.current = currentPage;
				this.getdatas();
			},
			changesize(pagesize) {
				this.pagesize = pagesize;
				this.getdatas();
			},
			
			getdatas() {
				this.$emit("loading", true);
				this.gethttp().then(result => {
					const datas = result.data;
					this.total = result.totalItems;
					this.$emit("loading", false);
					this.$emit('pagechange', datas);
				})
				.catch(() => {
					this.$emit("loading", false);
					this.$emit('pagechange', []);
				})
			},
			
			getparamites() {
				return {
					_PAGE_NO_: this.current,
					_PAGE_SIZE_: this.pagesize,
					...this.paramiters
				};
			},
			
			
			gethttp() {
				if(this.type == "post") {
					return this.$http.post(this.serverUrl, this.getparamites());
				} else if(this.type == "get") {
					return this.$http.get(this.serverUrl);
				}
			}
		},
		
		watch: {
			serverUrl: {
				handler: function() {
					this.current=1;
					this.getdatas();
				},
				deep: true
			},
			paramiters: {
				handler: function() {
					this.current=1;
					this.getdatas();
				},
				deep: true
			}
		},
		
	}
</script>

<style>

</style>